<template>
  <div id="lineCtrl" class="wrapper py-3 px-4">
    <el-input class="mr-3" placeholder="请输入搜索内容" size="small" style="width: 254px;">
      <el-button class="ur-btn ur-btn-search" slot="append">
        <i class="iconfont icon-sousuo mr-0" style="width: 14px;height: 14px;"></i></el-button>
    </el-input>
    <div class="d-flex justify-content-between align-items-center">
      <ul :class="[`${'switchBg'+onOffType}`]" class="d-flex switchGroup justify-content-around my-3">
        <li :class="{'notAllowed':btnState}" @click="lineCtrl(0)" style="width: 40%"></li><!--全关-->
        <li :class="{'notAllowed':btnState}" @click="lineCtrl(2)" style="width: 20%"></li><!--中立-->
        <li :class="{'notAllowed':btnState}" @click="lineCtrl(1)" style="width: 40%"></li><!--全开-->
      </ul>
      <el-button class="ur-btn w70" size="small" @click="lineQuery">查询</el-button>
    </div>

    <title-mark class="mb-4" :title="'6路线控'"></title-mark>
    <ul class="w-100 d-flex  flex-wrap tagGroup">
      <li class="d-flex flex-column justify-content-center align-items-center" :class="{active:lineNos.includes(index)}" @click="lineSelect(index)" v-for="index in 6">
        <label>线路{{lineObj[index]}}</label>
        <i v-if="LineStateList[index-1]!=2" class="iconfont mr-0 mt-1" :class="{'icon-on':LineStateList[index-1]==1,'icon-off':LineStateList[index-1]==0}"></i>
        <label v-else>无</label>
      </li>
    </ul>

    <title-mark class="mb-4" :title="'16路线控板'"></title-mark>
    <ul class="w-100 d-flex  flex-wrap tagGroup" v-if="controlLength">
      <li :class="{active:controlboardNos.includes(index)}" @click="lineSelect(index)"
          class="d-flex flex-column justify-content-center align-items-center" v-for="index in 16">
        <label>线路{{lineObj[index]}}{{controlboard['Line'+(index-1)+'State']}}</label>
        <i :class="{'icon-on':controlboard[index-1]['Line'+(index)+'State']==1,'icon-off':controlboard[index-1]['Line'+(index)+'State']==0}" class="iconfont mr-0 mt-1"
           v-if="controlboard[index-1]['Line'+(index)+'State']!=2"></i>
        <label v-else>无</label>
      </li>
    </ul>
    <div v-else class="w-100 text-center mt-5">
      <img src="./img/blank.png">
      <div class="mt-2 txt_blue">空</div>
    </div>

  </div>
</template>

<script>
  import api from 'api/api'
  import titleMark from "base/titleMark";
  import {mapState} from 'vuex'

  export default {
    components: {titleMark},
    props: {
      box:{
        type:Object,
        default:{}
      }
    },
    data() {
      return {
        onOffType: 2,
        lineObj: {1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六',7:'七',8:'八',9:'九',10:'十',11:'十一',12:'十二',13:'十三',14:'十四',15:'十五',16:'十六'},
        lineNos: [1,2,3,4,5,6],
        LineStateList:[2,2,2,2,2,2],
        meter:null,
        controlLength:false,
        controlboard: [],
        controlboardNos:[]
      }
    },
    watch: {
      box:{
        handler(newValue, oldValue) {
          this.box = newValue
          this.lineQuery()
        },
        deep: true
      }
    },
    computed: {
      ...mapState({
        btnState: state => state.user.btnState,
      })
    },
    methods: {
      lineCtrl(state) {
        if(this.btnState) return //不能操作
        this.onOffType = state
        let lineStates=[]
        this.lineNos.map(line=>{
          lineStates.push(state)
        })
        if(!this.lineNos.length){
          return this.$message.warning('请勾选线路')
        }
        this.$store.commit('user/SET_BTN_STATE',true)
        api.fetchSimple('/Communication/LineControl',{EccAddr:this.box.Addr,LineNos:this.lineNos,LineStates:lineStates})
            .then(r=>{
              this.$store.commit('user/SET_BTN_STATE',false)
              if (r.CmdState == 0) {
                this.$message.success(state ? '开启成功' : '关闭成功')
                this.lineQuery()
              } else {
                this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
              }
            })
      },
      lineSelect(index) {
        if (this.lineNos.includes(index)) {
          let start = this.lineNos.indexOf(index)
          this.lineNos.splice(start, 1)
        } else {
          this.lineNos.push(index)
        }
      },
      lineQuery(){
        if (this.controlLength) {
          this.queryline16()
        }else{
          api.fetchSimple('/Communication/lineQuery',{EccAddr:this.box.Addr,LineNos:[1,2,3,4,5,6]})
              .then(r=>{
                if(r.CmdState==0){
                  this.LineStateList=r.LineStateList
                }else{
                  this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
                }
              })
        }
      },
      queryline16(){
        api.fetchSimple('/Communication/ControlByWire',{TnAddr:this.meter.Addr,EccAddr:this.box.Addr,Type:1})
            .then(r=>{
              if (r.CmdState == 0) {
                this.controlboard=r
              } else {
                this.$message.error({showClose: true, message: this.global.cmdStatus[r.CmdState]})
              }
            })
      },
      queryMater485(){
        api.fetchSimple('/ViewInfo/QueryMater485', {eccAddr: this.box.Addr})
            .then(r => {
              if (r.length) {
                this.meter = r[0]
                this.controlLength=false
              }else{
                this.controlLength=true
              }
            })
      }
    },
    created() {
      this.$store.commit('user/SET_BTN_STATE',false)
      for(let i=1;i<=16;i++){
        let o={}
        o['Line'+i+'State']=2
        this.controlboard.push(o)
      }
      this.controlboard.splice(0,0)
      this.lineQuery()
    },
    mounted() {
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #lineCtrl{
    .tagGroup{
      li{/*url("~static/image/comm/line_bg.png") no-repeat*/
        width:74px;height:50px;line-height:20px !important;text-align:center;color:#6B82CB;margin:0 15px 15px 0;background: rgba(49, 62, 92,.2);
        &:nth-child(4n){margin-right :0}
        &.active{
          background:url("~static/image/comm/line_active_bg.png") no-repeat;color:#fff;background-size:100% 100%;
          .icon-lamp{background:url("~static/image/comm/icon-lamp_active.png") no-repeat;}
        }
        &:not(.active):hover{color:#9FB2EF;background:rgba(49, 62, 92,.3) url("~static/image/comm/btn_bg.png") no-repeat;background-position :center center; }
      }
    }
    .ur-btn-search{width:32px;height 32px;background :#313E5C;}
    .icon-on{width: 11px;height: 11px;background: url("img/state1.png") no-repeat}
    .icon-off{width: 11px;height: 11px;background: url("img/state0.png") no-repeat}
  }
</style>
